<template>
    <div class="container">
        <div class="tabWrapper" style="margin-top:20px;">
            <div :class="[{'tab': currIndex != index}, {'tab-active': currIndex == index}]" v-for="(item, index) in tabs" :key="index" @click="onTabClick(index)">
                {{item}}
            </div>
        </div>
        <div ref="jjycChart0" class="chart" v-show="currIndex == 0"></div>
        <div ref="jjycChart1" class="chart" v-show="currIndex == 1"></div>
        <div ref="jjycChart2" class="chart" v-show="currIndex == 2"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    props: {
        data: Object
    },
    data() {
        return {
            tabs: ['产业集聚趋势', '人力资源集聚趋势', '剧组集聚趋势'],
            currIndex: 0,
            myChart1: null,
            myChart2: null,
            myChart3: null,
        }
    },
    watch: {
        data: {
            handler() {
                this.$nextTick(() => {
                    this.showChart(this.myChart1, 'jjycChart0', this.getChartOption1());
                    this.showChart(this.myChart2, 'jjycChart1', this.getChartOption2())
                    this.showChart(this.myChart3, 'jjycChart2', this.getChartOption3())
                })
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        onTabClick(index) {
            this.currIndex = index;
            // this.showChart(this.currIndex);
            this.$nextTick(() => {
                if (index == 0) {
                    this.showChart(this.myChart1, 'jjycChart0', this.getChartOption1());
                } else if (index == 1) {
                    this.showChart(this.myChart2, 'jjycChart1', this.getChartOption2())
                } else {
                    this.showChart(this.myChart3, 'jjycChart2', this.getChartOption3())
                }
            })
        },
        showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            } else {
                instance.clear();
            }
            instance.setOption(option);

        },
        getChartOption1() {
            let serie = {
                type: 'pictorialBar',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            }
            return {
                tooltip: this.getTooltipItem(),
                legend: {
                    icon: 'rect',
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: '#FFF',
                        fontSize: 14
                    },
                    top: 5
                },
              grid: [
                {
                  left: '4%',
                  right: '4%',
                  top: '20%',
                  bottom: '12%',
                  containLabel: true
                }
              ],
                xAxis: {
                    data: this.data.cyjjqs.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '年度',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },

                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis: [{
                    name: '企业数：家',
                    splitNumber: 5,
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14,
                        padding: [0, 0, 0, 15]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                },{
                    name: '金额：亿元',
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14,
                        padding: [0, 0, 0, 15]
                    },
                    splitNumber: 5,
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                series: [{
                    name: '企业数量',
                    data: this.data.cyjjqs.map(e => e.value),
                    yAxisIndex: 0,

                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 1, color: 'rgba(8,132,255,1)'
                            }, {
                                offset: 0.2, color: 'rgba(8,132,255,0.5)'
                            }, {
                                offset: 0, color: 'rgba(8,132,255,0)'
                            }]
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function(value) {
                            return `{a|${value.data}}\n{dot| }`
                        },
                        rich: {
                            dot: {
                                width: 4,
                                height: 4,
                                borderColor: '#0884FF',
                                align: 'center',
                                borderWidth: 1,
                                borderRadius: 2
                            },
                            a: {
                                color: 'white',
                                align: 'center',
                                padding: 2,
                                fontSize: 14
                            }
                        }
                    },
                    ...serie
                },{
                    name: '税收',
                    barGap: '-30%',
                    yAxisIndex: 1,
                    data: this.data.cyjjqs.map(e => e.value2),
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 1, color: 'rgba(255,160,10,1)'
                            }, {
                                offset: 0.2, color: 'rgba(255,160,10,0.5)'
                            }, {
                                offset: 0, color: 'rgba(255,160,10,0)'
                            }]
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function(value) {
                            return `{a|${value.data}}\n{dot| }`
                        },
                        rich: {
                            dot: {
                                width: 4,
                                height: 4,
                                borderColor: '#FFA00A',
                                align: 'center',
                                borderWidth: 1,
                                borderRadius: 2
                            },
                            a: {
                                color: 'white',
                                align: 'center',
                                padding: 2,
                                fontSize: 14
                            }
                        }
                    },
                    ...serie
                }]
            }
        },
        getChartOption2() {
            let serie = {
                type: 'line',
            }
            return {
              grid: [
                {
                  left: '4%',
                  right: '4%',
                  top: '20%',
                  bottom: '12%',
                  containLabel: true
                }
              ],
                tooltip: this.getTooltipItem(),
                colors: ['#0884FF', '#64E6E2', '#FFA00A'],
                legend: {
                    icon: 'rect',
                    itemWidth: 8,
                    itemGap: 24,
                    itemHeight: 8,
                    textStyle: {
                        color: '#FFF',
                        fontSize: 14
                    },
                    top: 15
                },
                xAxis: {
                    data: this.data.rlzyjjqs.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '年度',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },

                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis:[{
                    name: '人数：人',
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14,
                        padding: [0, 0, 0, 15]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                 series:[{
                    name: '配套人员',
                    data: this.data.rlzyjjqs.map(e => e.value),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(8,132,255,1)'},
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(8,132,255,0.0)'
                            }, {
                                offset: 0.8, color: 'rgba(8,132,255,0.3)'
                            }, {
                                offset: 1, color: 'rgba(8,132,255,0.4)'
                            }]
                        }
                    },
                    ...serie
                },{
                    name: '群演',
                    data: this.data.rlzyjjqs.map(e => e.value2),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(100,230,226,1)'},
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(100,230,226,0)'
                            }, {
                                offset: 0.8, color: 'rgba(100,230,226,0.3)'
                            },{
                                offset: 1, color: 'rgba(100,230,226,0.4)'
                            }]
                        }
                    },
                    ...serie
                },{
                    name: '专业人才',
                    data: this.data.rlzyjjqs.map(e => e.value3),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(255,160,10,1)'},
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(255,160,10,0)'
                            }, {
                                offset: 0.2, color: 'rgba(255,160,10,0.3)'
                            }, {
                                offset: 1, color: 'rgba(255,160,10,0.4)'
                            }]
                        }
                    },
                    ...serie
                }]

            }
        },
        getChartOption3() {
            let serie = {
                type: 'line',
            }
            return {
                tooltip: this.getTooltipItem(),
              grid: [
                {
                  left: '4%',
                  right: '4%',
                  top: '20%',
                  bottom: '12%',
                  containLabel: true
                }
              ],
                colors: ['#0884FF', '#64E6E2', '#FFA00A'],
                legend: {
                    icon: 'rect',
                    itemWidth: 8,
                    itemGap: 24,
                    itemHeight: 8,
                    textStyle: {
                        color: '#FFF',
                        fontSize: 14
                    },
                    top: 15
                },
                xAxis: {
                    data: this.data.jzjjqs.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '年度',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },

                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis:[{
                    name: '数量：个',
                    splitNumber: 5,
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14,
                        padding: [0, 0, 0, 15]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                },{
                    name: '人数：人',
                    splitNumber: 5,
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14,
                       // padding: [0, 0, 0, 15]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                 series:[{
                    name: '剧组数量',
                    data: this.data.jzjjqs.map(e => e.value),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(8,132,255,1)'},
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(8,132,255,0.0)'
                            }, {
                                offset: 0.8, color: 'rgba(8,132,255,0.3)'
                            }, {
                                offset: 1, color: 'rgba(8,132,255,0.4)'
                            }]
                        }
                    },
                    ...serie
                },{
                    name: '剧组人数',
                    data: this.data.jzjjqs.map(e => e.value2),
                    lineStyle: {color: 'rgba(100,230,226,1)'},
                    yAxisIndex: 1,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(100,230,226,0)'
                            }, {
                                offset: 0.8, color: 'rgba(100,230,226,0.3)'
                            },{
                                offset: 1, color: 'rgba(100,230,226,0.4)'
                            }]
                        }
                    },
                    ...serie
                }]
            }
        },
        getTooltipItem() {
            return {
                borderWidth: 1,
                borderColor: 'rgba(8,132,255,0.4)',
                backgroundColor: 'rgba(2,32,61,0.72)',
                trigger: 'axis',
                formatter: function(params) {
                    console.log(params)
                    let child = '';
                    for(let i = 0; i < params.length; i++) {
                        child += `<div style="display:flex;align-items:center;color:#FFF;font-size:16px;padding:8px 0">
                        <div style="width:8px;height:8px;background:${typeof(params[i].color) == 'string' ? params[i].color: params[i].color.colorStops[0].color};"></div>
                        <div style="padding-left:8px">${params[i].seriesName}</div>
                        <div style="color:#64E6E2;padding:0 4px">${params[i].data}</div>
                        </div>`
                    }
                    return child;

                }


/*
                    <div style="opacity:0.72">${i == 0 ? '个': '人'}</div>
*/
            }
        },
    }
}
</script>
<style lang="less" scoped>
.container {
    box-sizing: border-box;
    position: relative;
}
.tabWrapper {
    display: flex;
    position: relative;
    padding-right: 24px;
    cursor: pointer;
}
.tab {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    text-align: center;
    font-weight: 400;
    border: 1px solid rgba(4,74,143,1);
    padding: 4px 0;
    text-align: center;
    flex: 1;

    &-active {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0.96px;
        text-align: center;
        font-weight: 400;
        border: 1px solid rgba(100,230,226,1);
        padding: 4px 0;
        text-align: center;
        flex: 1;
        color: #64E6E2;
    }
}
.chart {
    position: absolute;
    height: 220px;
    width: 500px;
    bottom: 0;
}
</style>
